<template>
  <Button type="primary" :loading="loading" @click="handleExport">{{
    title
  }}</Button>
</template>

<script setup>
import { ref } from "vue";
import { exportFileData } from "../utils.js";
import { Button, message } from "ant-design-vue";

const props = defineProps({
  exportApi: {
    type: Function,
    required: true,
  },
  params: {
    type: Object,
    default: () => ({}),
  },
  title: {
    type: String,
    default: "导出",
  },
});

const loading = ref(false);
let hide = null;
const handleExport = async () => {
  try {
    loading.value = true;
    hide = message.loading("导出中...", 0);
    const res = await props.exportApi(props.params);
    exportFileData(res);
    message.success("导出成功");
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
    hide();
  }
};
</script>
